<template>
  <view class="inde_page">
    <unitv-page id="indexPage" :show="true" ref="indexPage" @back="pageBack">
      <view class="nav_box">
        <!-- <unitv-zone
          id="zoneSearch"
          :down="isTv ? 'zoneTv' : 'zoneBanner'"
          right="zoneNav"
        >
          <unitv-item
            hoverClass="search_hover"
            @click="clickSearch"
            :item="0"
            class="search"
          >
            <image src="../../static/search.png" mode="aspectFit"></image>
          </unitv-item>
        </unitv-zone> -->
        <unitv-zone
          id="zoneNav"
          :down="isTv ? 'zoneTv' : 'zoneBanner'"
          left="zoneSearch"
          :values="tabDataList"
          :column="tabDataList.length"
          :autoFous="true"
          class="zone0"
        >
          <unitv-scroll>
            <unitv-item
              v-for="(item, index) in tabDataList"
              :item="index"
              :key="index"
              @hover="swtichTab"
              class="zone0_item"
              selectClass="zone0_item_select"
              hoverClass="zone0_item_hover"
              :isSelctByClick="false"
            >
              {{ item.name }}
            </unitv-item>
          </unitv-scroll>
        </unitv-zone>
      </view>
      <view class="loading" v-if="isShowloading">
        <image src="../../static/loading1000.gif" mode="aspectFit"></image>
      </view>
      <view v-if="isTv" class="zone4_tv_box">
        <unitv-zone
          id="zoneTv"
          up="zoneNav"
          :values="tvList"
          :column="5"
          class="zone4_tv"
        >
          <unitv-item
            v-for="(item, index) in tvList"
            :item="index"
            :key="item.id"
            class="zone4_item"
            hoverClass="zone4_item_hover"
            @click="clickTvItem(index)"
          >
            {{ item.title }}
          </unitv-item>
        </unitv-zone>
      </view>
      <view v-else>
        <!-- banner -->
        <cus-home-banner
          :homeBannerData="pc_carousel"
          v-if="pc_carousel.length > 0"
          :zoneDownName="pc_hot_filter.length > 0 ? 'zoneClass' : 'zone0'"
        >
        </cus-home-banner>
        <!-- 分类 -->
        <unitv-zone
          id="zoneClass"
          down="zone0"
          left="zone0"
          up="zoneBanner"
          right="zoneBanner"
          :values="pc_hot_filter"
          :column="pc_hot_filter.length"
          class="zone4"
          v-if="pc_hot_filter.length > 0"
        >
          <unitv-scroll>
            <unitv-item
              v-for="(item, index) in pc_hot_filter"
              :item="index"
              :key="index"
              class="zone4_item"
              hoverClass="zone4_item_hover"
              @click="clickClassItem(item)"
            >
              {{ item.label_title }}
            </unitv-item>
          </unitv-scroll>
        </unitv-zone>
        <view class="list_box" v-for="(item, index) in dataList" :key="index">
          <!-- 为你推荐 -->
          <view class="title">-</view>
          <unitv-zone
            :id="'zone' + index"
            :values="item.list"
            :column="50"
            class="zone3"
            :up="
              index === 0 && pc_hot_filter.length > 0
                ? 'zoneClass'
                : index === 0 && pc_hot_filter.length === 0
                ? 'zoneBanner'
                : 'zone' + (index - 1)
            "
            :down="'zone' + (index + 1)"
            @scrolltolower="loadMoreFun"
            @swtichZone="swtichZoneFun"
          >
            <unitv-item
              v-for="(ele, number) in item.list"
              :item="number"
              :key="number"
              @click="clickItem(ele)"
              class="item_recom"
              hoverClass="item_recom_hover"
              @hover="zone3Hover"
            >
              <cus-wntj-item
                :item="ele"
                :index="number"
                :hoverIndex="zoneItemSelectIndex"
              >
              </cus-wntj-item>
            </unitv-item>
          </unitv-zone>
        </view>
      </view>
    </unitv-page>
  </view>
</template>

<script>
import { getHomeDataList, getDetail, getTvList } from "../../api/index.js";
import tabDataList from "@/utils/navData.js";
import commonUtil from "@/store/commonUtil.js";

import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      page_context: null,
      has_next_page: false,
      zoneItemSelectIndex: null,
      tabDataList: tabDataList,
      tabData: {},
      tabIndex: 0,
      page_id: "",
      dataList: [],
      pc_carousel: [],
      pc_hot_filter: [],
      isShowloading: true,
      isTv: false,
      pageIndex: 0,
      pageSize: 50,
    };
  },
  computed: {
    ...mapState(["tvList"]),
  },
  onReady() {
    this.tabData = this.tabDataList[this.tabIndex];
    this.page_id = this.tabData.unChannelId;
  },
  onShow() {
    if (this.$refs.indexPage) {
      this.$refs.indexPage.showPage();
      this.getData();
    }
  },
  methods: {
    ...mapMutations(["setTvList"]),
    getData() {
      this.isShowloading = true;
      console.log(
        "this.tabDataList[this.tabIndex].channelId",
        this.tabDataList[this.tabIndex].channelId
      );
      getHomeDataList({
        // page_context: this.page_context,
        // page_id: this.page_id,
        channel: this.tabDataList[this.tabIndex].channelId || "",
        sort: "weight",
        limit: this.pageSize,
        page: this.pageIndex,
      })
        .then((res) => {
          this.isShowloading = false;
          if (res.code == 20000) {
            const items = res.data.items || [];
            if (this.dataList.length) {
              this.dataList[this.dataList.length - 1].list.push(...items);
            } else {
              this.dataList = [
                {
                  name: "日漫",
                  list: items,
                },
              ];
            }

            this.has_next_page = items.length >= this.pageSize;

            // if (!this.page_context) {
            // 	this.dataList = res.data.list || [];
            // 	this.pc_carousel = res.data.pc_carousel || [];
            // 	this.pc_hot_filter = res.data.pc_hot_filter || [];
            // } else {
            // 	this.dataList[this.dataList.length - 1].list.push(...res.data.list)
            // }
            // this.has_next_page = res.data.has_next_page;
            // this.page_context = res.data.page_context;
          }
        })
        .catch((res) => {
          this.isShowloading = false;
        });
    },
    getTvListFun() {
      this.isShowloading = true;
      getTvList()
        .then((res) => {
          this.isShowloading = false;
          if (res.code == 200) {
            this.setTvList(res.data || []);
          }
        })
        .catch((res) => {
          this.isShowloading = false;
        });
    },
    clickItem(item) {
      console.log("跳转详情-before", item);
      console.log("跳转详情-before-token", commonUtil.getItem("token"));
      if (!commonUtil.getItem("token")) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
        return;
      }
      uni.navigateTo({
        url: `/pages/player/player`,
        success: function (res) {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit("playerPageData", {
            data: item,
          });
        },
      });
    },
    clickSearch() {
      uni.navigateTo({
        url: "/pages/search/search",
      });
    },
    pageBack(e) {
      uni.showModal({
        title: "提示",
        content: "是否退出",
        success: function (res) {
          if (res.confirm) {
            plus.runtime.quit();
          } else if (res.cancel) {
          }
        },
      });
      return false;
    },
    zone3Hover(index) {
      this.zoneItemSelectIndex = index;
    },
    clickClassItem(item) {
      uni.navigateTo({
        url: `/pages/filter/filter?filter_value=${item.filter_value}&page_id=${
          item.page_id || "channel_list_second_page"
        }&channel_id=${this.page_id}`,
      });
    },
    clickTvItem(index) {
      uni.navigateTo({
        url: `/pages/tvPlayer/tvPlayer?index=${index}`,
      });
    },
    swtichTab(index) {
      console.log("index", index);
      //如果是电视频道
      // if (index === 1) {
      //   this.isTv = true;
      //   this.getTvListFun();
      // } else {
      this.isTv = false;
      this.tabIndex = index;
      this.tabData = this.tabDataList[index];
      this.page_id = this.tabData.unChannelId;
      this.pageIndex = 0;
      this.dataList = [];
      this.pc_carousel = [];
      this.pc_hot_filter = [];
      this.page_context = null;
      this.getData();
      // }
    },
    loadMoreFun() {
      if (this.has_next_page) {
        this.getData();
      } else {
        uni.showToast({
          title: "没有更多数据了！",
          duration: 2000,
        });
      }
    },
    swtichZoneFun(data) {
      this.zoneItemSelectIndex = null;
    },
  },
};
</script>


<style lang="scss">
#zoneNav {
  flex: 1;
}
.loading {
  image {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 10;
    top: 0px;
    left: 0px;
    background-color: #1d1c37;
  }
}

.inde_page {
  paddidng-bottom: 50rpx;
  position: relative;

  .loading {
    width: 100vw;
    height: 100vh;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .list_box {
    padding: 0rpx 20rpx;
  }

  .nav_box {
    display: flex;
    position: absolute;
    top: 0rpx;
    left: 0px;
    padding: 20rpx;
    z-index: 130;
    width: 100%;
    .zone0_item {
      margin: 0px 20rpx;
      color: #fff;
      font-size: 18rpx;
      display: inline-block;
      padding: 2rpx 20rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50rpx;
    }

    .zone0_item_select {
      color: $uni-color-theme;
      background: rgba(#ec2224, 0.2);
    }

    .zone0_item_hover {
      background: $uni-color-theme;
    }

    .zone0 {
      width: 50%;
      display: flex;
      white-space: nowrap;
      align-items: center;

      .zone0_item:nth-child(1) {
        margin: 0rpx;
      }
    }

    .search {
      width: 20rpx;
      height: 20rpx;
      margin: 0px 20rpx;
      color: #fff;
      font-size: 18rpx;
      padding: 4rpx 10rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50rpx;

      image {
        width: 20rpx;
        height: 20rpx;
      }
    }

    .search_hover {
      background: $uni-color-theme;
      transform: scale(1.1);
    }
  }

  .zone2 {
    margin: 5rpx;

    .item_hot {
      display: inline-block;
      margin: 10rpx;
    }

    .item_hot_hover {
      transform: scale(1.1);
      border-radius: 12rpx;

      .bg_0 {
        border: 2rpx solid #fc0091;
      }

      .bg_1 {
        border: 2rpx solid #118eff;
      }

      .bg_2 {
        border: 2rpx solid #5300ff;
      }

      .bg_3 {
        border: 2rpx solid #fc4507;
      }

      .bg_4 {
        border: 2rpx solid #2fff08;
      }
    }
  }

  .zone3 {
    width: 100vw;
    margin-left: 10rpx;
  }

  .zone4 {
    width: 100%;
    white-space: nowrap;
    align-items: center;
    margin-left: 10rpx;
    margin-top: 20rpx;

    .zone4_item {
      width: 120rpx;
      height: 80rpx;
      line-height: 80rpx;
      margin: 10rpx;
      background: linear-gradient(
        to bottom right,
        rgba(#1eaeeb, 10%),
        rgba(#213aff, 20%)
      );
      color: #fff;
      font-size: 20rpx;
      text-align: center;
      display: inline-block;
      border-radius: 8rpx;
    }

    .zone4_item_hover {
      transform: scale(1.1);
      background: linear-gradient(
        to bottom right,
        rgba(#e80e11, 100%),
        rgba(#fd7608, 100%)
      );
    }
  }

  .zone4_tv_box {
    margin-top: 120px;
  }

  .zone4_tv {
    width: 100%;
    align-items: center;
    margin-left: 10rpx;
    margin-top: 20rpx;

    .zone4_item {
      width: 120rpx;
      height: 80rpx;
      line-height: 80rpx;
      margin: 10rpx;
      background: rgba(255, 255, 255, 0.2);
      color: #fff;
      font-size: 14rpx;
      text-align: center;
      display: inline-block;
      border-radius: 8rpx;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      white-space: nowrap;
    }

    .zone4_item_hover {
      transform: scale(1.1);
      background: rgba(252, 0, 7, 0.4);
    }
  }

  .item_recom {
    display: inline-block;
  }

  .item_recom_hover {
    .wntj_item_box {
      transform: scale(1.1);
      border: 2rpx solid $uni-color-theme;
    }
  }
}
</style>